<template>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body" >

      <!--高级搜索-->
      <SearchPublic
        :searchObj="searchObj"
        @searchParams="searchParamsFn"
      ></SearchPublic>

<!--      <div class="search-ctrl f-l" >
        <form style="height: 100%;">
          <input placeholder="根据警员名称" v-model="params.OperatorName" class="search-text">
          <button class="search-btn btn btn-default more-btn" @click="searchMoreShowFn" type="button">更多条件</button>
          <button class="search-btn btn btn-info" @click="searchDotResource" type="button">搜索</button>
          <transition
            name="custom-classes-transition"
            enter-active-class="animated fadeInUp"
            leave-active-class="animated fadeOutDown"
          >
            <div class="search-more-body" v-show="searchMoreIsShow">
              <input placeholder="根据模块名称" v-model="params.moduleName" class="search-text">
              <input placeholder="根据部门查询" v-model="searchMoreSectionName" @click="getSectionTreeFn" readonly="readonly" class="search-text">
              <input type="hidden" v-model="params.institutionsid" class="search-text">
              <div class="sectionTree" v-show="sectionTreeIShow">
                <div id="sectionSearchTree" class="ztree sectionTree-box"></div>
              </div>
              <button type="button" class="btn btn-info" @click="clearSearch">重置条件</button>
              &lt;!&ndash;  <input placeholder="根据WIFI类型编码" v-model="tableRowParams.code" class="search-text">&ndash;&gt;
            </div>
          </transition>
        </form>
      </div>-->

   <!--   <div class="btns f-r">
        <button type="button" class="btn btn-danger">删除</button>
      </div>-->
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <!--{{treeTableRow}}-->
      <div class="table-header">
        <table class="table-default">
          <thead>
            <tr>
              <th v-for="ths in tableHeader">
                {{ths.value}}
              </th>
            </tr>
          </thead>
        </table>
      </div>
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr
            v-for="(trs,index) in tableRowHtml.data"
            :class="{active: index === activeIndex}"
          >
            <td v-for="tds in tableHeader" :title="[trs,tds.key] | roleStageCode">
              {{ [trs,tds.key] | roleStageCode }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages
        v-show="tableRowHtml.elementsSum !== 0"
        v-if="tableRowHtml"
        :showItem="10"
        :pageSize="20"
        :allDataSum="tableRowHtml.elementsSum"
        :allpage="(Math.ceil(tableRowHtml.elementsSum/20))"
        @current-change="tablePageData"
      ></Pages>

    </div>
  </div>
</template>

<script>
  import Pages from "../../sudoku/atom/pages"
  import SearchPublic from "../../publicTemplate/search/SearchPublic"
  export default {
    name: "loggingWrite",
    data(){
      return{
        activeIndex:-1,
        tableHeader:[
          {"key":"accountName","value":"账户"},
          {"key":"operatorName","value":"警员名"},
          {"key":"moduleName","value":"模块名称"},
          {"key":"log","value":"操作"},
          {"key":"ipAddress","value":"IP地址"},
          {"key":"insititutionsName","value":"所属单位"},
          {"key":"createTime","value":"操作时间"}
        ],
        tableRowHtml:[],
        selectId:null,
        timer:null,
        params:{
          operator: "",
          pageNum: 1,
          pageSize: 20,
          createTime:"",//更新时间
          moduleName:"",//模块名称
          institutionsid:"",//所属部门
          OperatorName:"",//操作人名称
        },
        sectionTreeIShow:false,
        searchMoreSectionName:"",
        searchMoreIsShow:false,
        settingSearchMore : {
          data: {
            simpleData: {
              enable: true
            },
          }
        },
        searchObj:{
          condition:[
            {"title":"模块名称","key":"moduleName",'type':'text',"value":''},
            {"title":"警员名称","key":"OperatorName",'type':'text',"value":''},
            {"title":"所属单位","key":"institutionsid","value":'','type':'treeSection','data':this.ztreeSection},
          ],
          htmlType:"searchDefaultPublic",
        },
        ztreeSection:[]
      }
    },
    components:{
      Pages,
      SearchPublic
    },
    mounted(){
      this.getLoggingWrite();
      this.$axios.get(this.HOST+'/station/getOrgaInfo')
        .then((data)=>{
          this.searchObj.condition[2].data = data.data.data;
        })
        .catch((err)=>{
          //console.log(err);
        })
    },
    destroyed(){
      clearInterval(this.timer);
    },
    methods:{
      getLoggingWrite(){
        this.params.operator = this.isLogin().userId;
        this.$axios.get(this.HOST+"/log/listV2",{
          params:this.params
        })
          .then(data=>{
            //console.log(data);
            this.tableRowHtml = data.data;
          })
          .catch(err=>{
            //console.log(err);
          })
      },

      //更多查询根据部门
      getSectionTreeFn(){
        //settingSearchMore
        let _this = this;
        this.settingSearchMore.callback = {
          onClick:function(event,treeId,treeNode){ //新增警员部门树选择
            //console.log(treeNode);
            _this.params.institutionsid = treeNode.id;
            _this.searchMoreSectionName = treeNode.name;
            _this.sectionTreeIShow = !_this.sectionTreeIShow;
          }
        };
        this.$axios.get(this.HOST+'/station/getOrgaInfo')
          .then((data)=>{
            this.ztreeSection = data.data.data;
            $.fn.zTree.init($("#sectionSearchTree"), this.settingSearchMore, data.data.data);
            this.sectionTreeIShow = !this.sectionTreeIShow;
            //console.log(data);
          })
          .catch((err)=>{
            //console.log(err);
          })
      },
      //搜索功能
      searchDotResource(){
        this.getLoggingWrite();
      },
   /*   //默认加载
      defaultLoad(ev){
        if( ev.keyCode === 8 ){
          if( this.tableRowParams.num === "" ){
           //this.searchDotResource();
          }
        }
      },*/
      //更多搜索
      searchMoreShowFn(){
        this.searchMoreIsShow = !this.searchMoreIsShow;
      },
      //翻页
      tablePageData(page){
        ////console.log(page);
        this.params.pageNum = page;
        this.getLoggingWrite();
      },
      //选择表格列
      selectTr(trObj,index){
        this.activeIndex = index;
        this.selectId = trObj.id;
        //console.log(trObj);
      },
      //搜索
      searchParamsFn(searchParams){
        //console.log(this.searchObj.condition);
        for( let i=0;i<this.searchObj.condition.length;i++ ){
            for( let paramsKey in this.params ){
              if( this.searchObj.condition[i].key === paramsKey ){
                this.params[paramsKey] = this.searchObj.condition[i].value
              }
            }
        }
        //console.log(this.params);
        this.getLoggingWrite();
      },
      //清除搜索条件
      clearSearch(){
        this.params = {
          operator: "",
            pageNum: 1,
            pageSize: 20,
            createTime:"",//更新时间
            moduleName:"",//模块名称
            institutionsid:"",//所属部门
            OperatorName:"",//操作人名称
        };
        this.searchMoreSectionName = "";
        this.searchDotResource();
      }
    }
  }
</script>

<style scoped>

</style>
